<template>
    <div class="fTagList" :style="{ left: userStore.asideWidth }">
        <el-tabs style="min-width: 100px;" v-model="activeTab" type="card" @tab-remove="removeTab" @tab-change="changeTab">
            <el-tab-pane :closable="item.path != '/'" v-for="item in tabList" :key="item.path" :label="item.title"
                :name="item.path">
            </el-tab-pane>
        </el-tabs>

        <span class="tagBtn">
            <el-dropdown @command="handleClose">
                <span class="el-dropdown-link">
                    <el-icon>
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="clearOther">关闭其他</el-dropdown-item>
                        <el-dropdown-item command="clearAll">关闭全部</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </span>
    </div>
    <div style="height: 44px;"></div>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { useUserStore } from '@/stores/user';
import { useCookies } from '@vueuse/integrations/useCookies'
import { router } from '../../router';

const cookies = useCookies()
const route = useRoute()
const userStore = useUserStore()

const activeTab = ref(route.path) // 默认选中
const tabList = ref([
    {
        title: '后台首页',
        path: '/'
    }
])

// 添加标签导航
function addTab(tab) {
    let noTab = tabList.value.findIndex(t => t.path == tab.path) == -1
    if (noTab) {
        tabList.value.push(tab)
    }
    cookies.set("tabList", tabList.value)
}

// 初始化标签导航列表
function initTabList() {
    let tbs = cookies.get("tabList")
    if (tbs) {
        tabList.value = tbs
    }
}

initTabList()

// 路由改变组件复用时触发
onBeforeRouteUpdate((to, from) => {
    activeTab.value = to.path
    addTab({
        title: to.meta.title,
        path: to.path,
    })
})

// 选择标签导航栏跳转
const changeTab = (t) => {
    activeTab.value = t
    router.push(t)
}

// 移除标签导航栏
const removeTab = (t) => {
    let tabs = tabList.value
    let a = activeTab.value
    if (a === t) {
        tabs.forEach((tab, index) => {
            if (tab.path === t) {
                const nextTab = tabs[index + 1] || tabs[index - 1]
                if (nextTab) {
                    a = nextTab.path
                }
            }
        })
    }
    activeTab.value = a
    tabList.value = tabList.value.filter(tab => tab.path !== t)
    cookies.set("tabList", tabList.value)
    router.push(a)
}

// 下拉菜单
const handleClose = (c) => {
    if (c === 'clearAll') {
        activeTab.value = '/'
        router.push('/')
        tabList.value = [{
            title: '后台首页',
            path: '/'
        }]
    } else if (c == "clearOther") {
        tabList.value = tabList.value.filter(tab => tab.path === '/' || tab.path === activeTab.value)
    }
    cookies.set("tabList", tabList.value)
}
</script>
<style scoped lang="less">
.fTagList {
    position: fixed;
    top: 64px;
    right: 0;
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    background-color: #eee;
    z-index: 100;

    :deep(.el-tabs__header) {
        border: 0 !important;
        margin-bottom: 0;
    }

    :deep(.el-tabs__nav) {
        border: 0 !important;
    }

    :deep(.el-tabs__item) {
        border: 0 !important;
        background-color: #fff;
        margin: 0 2px;
        height: 32px;
        line-height: 32px;
        border-radius: 5px;
    }

    :deep(.el-tabs__nav-next),
    :deep(.el-tabs__nav-prev) {
        line-height: 32px;
        height: 32px;
    }

    :deep(.is-disabled) {
        cursor: not-allowed;
    }

    .tagBtn {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        height: 32px;
        width: 32px;
        border-radius: 5px;
        margin-left: auto;
    }
}
</style>